{% extends "scheduling/base.html" %}
{% load static %}

{% block content %}
<div class="container mt-4">
    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white">
            <h3 class="mb-0">
                <i class="fas fa-calendar-plus me-2"></i>添加新班次
            </h3>
        </div>
        <div class="card-body">
            <!-- 表单提交 -->
            <form method="post" class="needs-validation" novalidate>
                {% csrf_token %}

                <!-- 发车时间 -->
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="id_departure_time" class="form-label">发车时间</label>
                        <input type="datetime-local" class="form-control" id="id_departure_time"
                               name="departure_time" required>
                        <div class="invalid-feedback">
                            请选择有效的发车时间。
                        </div>
                    </div>

                    <!-- 车辆选择 -->
                    <div class="col-md-6 mb-3">
                        <label for="id_bus" class="form-label">车辆</label>
                        <select class="form-select" id="id_bus" name="bus" required>
                            <option value="">请选择车辆</option>
                            {% for bus in buses %}
                                {% if bus.status == 'normal' %}
                                    <option value="{{ bus.bus_id }}" data-status="{{ bus.status }}">
                                        {{ bus.bus_id }}
                                    </option>
                                {% else %}
                                    <option value="" disabled data-status="{{ bus.status }}">
                                        {{ bus.bus_id }} ({{ bus.get_status_display }})
                                    </option>
                                {% endif %}
                            {% endfor %}
                        </select>
                        <div class="invalid-feedback">
                            请选择一辆可用的车辆。
                        </div>
                    </div>
                </div>

                <!-- 司机选择 -->
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="id_driver" class="form-label">司机</label>
                        <select class="form-select" id="id_driver" name="driver" required>
                            <option value="">请选择司机</option>
                            {% for driver in drivers %}
                                {% if driver.status == 'on_duty' %}
                                    <option value="{{ driver.driver_id }}">{{ driver.name }} ({{ driver.driver_id }})</option>
                                {% else %}
                                    <option value="" disabled>{{ driver.name }} ({{ driver.get_status_display }})</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                        <div class="invalid-feedback">
                            请选择一名在岗司机。
                        </div>
                    </div>

                    <!-- 提示信息 -->
                    <div class="col-md-6 mb-3 d-flex align-items-end">
                        <div class="form-text text-muted">
                            <i class="fas fa-info-circle me-2"></i>
                            系统会自动检测车辆是否在维修中，司机是否在休班
                        </div>
                    </div>
                </div>

                <!-- 提交按钮 -->
                <div class="d-flex justify-content-end mt-4">
                    <button type="submit" class="btn btn-success me-2">
                        <i class="fas fa-save me-2"></i>保存班次
                    </button>
                    <a href="{% url 'schedule_list' %}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>返回列表
                    </a>
                </div>
            </form>

            <!-- 非字段错误提示 -->
            {% if form.non_field_errors %}
                <div class="alert alert-danger mt-4">
                    {{ form.non_field_errors }}
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- JavaScript 功能 -->
<script>
// 设置默认发车时间为当前时间 + 5 分钟
document.addEventListener('DOMContentLoaded', function () {
    const now = new Date();
    now.setMinutes(now.getMinutes() + 5); // 避免立即发车

    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');

    const formattedTime = `${year}-${month}-${day}T${hours}:${minutes}`;
    document.getElementById('id_departure_time').value = formattedTime;
});

// 表单验证逻辑
(function () {
    'use strict';
    var forms = document.querySelectorAll('.needs-validation');
    Array.prototype.slice.call(forms).forEach(function (form) {
        form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        }, false);
    });
})();

// 车辆状态提醒
document.getElementById('id_bus').addEventListener('change', function () {
    const selectedOption = this.options[this.selectedIndex];
    const status = selectedOption.getAttribute('data-status');
    if (status === 'maintenance') {
        alert('注意：您选择的车辆正在维修中！');
    }
});
</script>
{% endblock %}
